<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2{
            width: 400px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            margin: 20px auto;
        }
        #box{
            width: 400px;
            height: 400px;
            border: 1px solid black;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        #btn{
            display: block;
            width: 100px;
            height: 30px;
            margin: 20px auto;
        }
        #box .cross div{
            width: 100px;
            height: 100px;
            float: left;
            /* background: blanchedalmond; */
        }
        #box .cross .black{
            background: black;
        }
        #box .wc {
            width: 400px;
            height: 400px;
            position: absolute;
            top: -400px;
        }
    </style>
    <script src="../util.js"></script>
</head>
<body>
    <h2>0</h2>
    <div id="box">
        <div class="wc">

        </div>
    </div>
    <button id="btn">开始</button>

    <script>
        var h2 = document.querySelector('h2')
        var wc = document.querySelector('#box .wc')
        var btn = document.querySelector('#btn')
        var box = document.querySelector('#box')

        function cDiv(classname) {
            var div = document.createElement('div')
            div.className = classname
            return div
        }
        
        function col (){
            var row = cDiv('cross')
            var c = sn()
            for(var i=0;i<4;i++){
                row.appendChild(cDiv(c[i]))
            }
            wc.insertBefore(row,wc.firstElementChild)   
        }
        function row () {
            for(var i=0;i<4;i++){
                col()
            }
        }


        function move (){
            var top = parseInt(utils.getstyle(wc,'top'))
            top += 15
            wc.style.top = top + 'px'
            if(top>=0){
                col()
                if(top >=100)
                wc.lastElementChild.remove()
                wc.style.top = '-100px'
            }
        }

        function auto () {
             box.timer = setInterval(() =>{
                move()
            },50)
        }
        
        btn.onclick = function (){
            auto()
        }

        row()
        function sn () {
            var arr = ['','','','']
            var x = Math.floor(Math.random()*4)
            arr[x] = 'black'
            return arr
        }

        box.onmousedown = function(e){
            // auto()
            // wc.style.display = 'block'
            var target = e.target || e.srcElenmenrt
            var va = h2.innerHTML
            if(target.className == 'black'){
                va++
                h2.innerHTML = va
                target.style.display = 'none'
            }else{
                alert('游戏结束，你的分数为'+va)
                clearInterval(box.timer)
                var wc1 = wc.querySelectorAll('.cross')
                wc1.forEach((e)=>{
                    e.remove()
                })
                h2.innerHTML = 0
                // wc.style.display = 'none'
            }
        }
    </script>
</body>
</html>